<!DOCTYPE html>
<html>
	<head>
			<script>
			var dpr = window.devicePixelRatio;
			    document.write('<meta name="viewport" content="width=device-width, initial-scale=' + 1 / dpr + ',user-scalable=no">')
		</script>
		<script>
			var html = document.querySelector("html");
			    html.style.fontSize = html.offsetWidth / 640 * 100 + "px";
			    addEventListener("resize", function () {
			        html.style.fontSize = html.offsetWidth / 640 * 100 + "px";
			    }, false);
		</script>
		<meta charset="UTF-8">
		<title>微信微场景</title>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<script src="js/swiper.min.js"></script>
		<script type="text/javascript" src="js/jquery-1.12.4.js"></script>
	
	</head>
	<body>
		<div id="main">
			<div id="loading">
		    	<ul>
		        	<li></li>
		            <li></li>
		            <li></li>
		            <li></li>
		            <li></li>
		            <li></li>
		        </ul>
		        <div class="title">缓慢加载中请稍等......</div>
			</div>
		 <div class="swiper-container">
        	<div class="swiper-wrapper">
            	<div class="swiper-slide num1">
	            	<ul class="ul1">
		            	<li>
		                	<p>曾经做为前端开发的你</p>
		                    <p>解决PC兼容性而焦头烂额</p>
		                </li>
		                <li>
		                	<p>而今</p>
		                    <p>移动端H5应用疯狂来袭</p>
		                </li>
		                <li>
		                	<p>你是否已准备充分</p>
		                    <p>学习新技能</p>
		                </li>
		                <li>
		                	<p>曾破茧成蝶、重获新生？</p>
		                </li>
	            	</ul>
            		
            </div>
            <div class="swiper-slide num2">
            	 <ul class="ul2">
                    <li class="active"></li>
                    <li class="active"></li>
                    <li class="active"></li>
                    <li class="active"></li>
                    <li class="active"></li>
                    <li class="active"></li>
                </ul>
            </div>
            <div class="swiper-slide num3">
            	<div class="ul3"></div>
            </div>
            <div class="swiper-slide num4">
            	 <ul class="ul4">
                    <li class="active">transform transition rotate scale translate keyframes animation webkitTransitionEnd webkitAnimationIteration elapsedTime perspective…</li>
                    <li class="active">drawImage lineWidth strokeStyle lineCap globalCompositeOperation moveTo lineTo stroke arc getImageData…</li>
                    <li class="active">audio autoplay loop paused play pause…</li>
                </ul>
            </div>
	            <div class="swiper-slide num5"></div>
	            <div class="swiper-slide num6"></div>
	            <div class="swiper-slide num7"></div>
           		 <div class="swiper-slide num8"></div>
        	</div>
    	</div>
    	<div id="music" class="">
        <audio id="audio1" src="img/music.mp3" loop ></audio>
        </div>
        <div class="top-opacity"></div>
         <canvas id="can" width="640" height="1136"></canvas>
   </div>
	</body>
	<script src="js/index.js"></script>
</html>
